<template>
	<view>
		<wp-search class="clientRect" :placeholder="$t('home.searchForCustomerNicknames')" @clearInput="clearInput" @cancelFocus="cancelFocus">
		</wp-search>
		<view class="clientRect" style="background-color: #FFFFFF;z-index: 999;">
			<u-dropdown ref="uDropdown" active-color="#9F6A0E">
				<u-dropdown-item v-model="value1" :title="dropdownName" @change="dropdownChange" :options="options">
				</u-dropdown-item>
				<u-dropdown-item :disabled="true"></u-dropdown-item>
				<u-dropdown-item :disabled="true"></u-dropdown-item>
			</u-dropdown>
		</view>
		<view>
			<mescroll-uni ref="mescrollRef" :top="topHeight" @init="mescrollInit" :down="downOption"
				@down="downCallback" :up="upOption" @up="upCallback">
				<view class="custome-list">
					<view class="custome-item" v-for="(item,index) in userList" :key='index'>
						<view>
							<image :src="item.avatar" style="width: 48px;height: 48px;"></image>
						</view>
						<view class="item-right">
							<view class="name">{{item.nickname}}</view>
							<view class="consume-time">
								{{$t('home.recentConsumption')}}：{{item.recentConsumptionTime?item.recentConsumptionTime:$t('home.none')}}</view>
							<view class="consume-count">
								<text>{{$t('home.totalConsumption')}}：{{item.consumptionNumber}}{{$t('home.times')}}</text>
								<view class="line"></view>
								<text>￥{{item.consumptionPrice}}</text>
							</view>
						</view>
					</view>
				</view>
			</mescroll-uni>
		</view>

	</view>
</template>

<script>
	let app = getApp();
	import {
		mapGetters
	} from "vuex";
	import {
		userListApi
	} from '@/api/customer.js';
	import wpSearch from "@/components/search/search.vue"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		computed: mapGetters(['isLogin']),
		components: {
			wpSearch,
		},
		data() {
			return {
				topHeight: 186,
				value1: '',
				options: [{
						label: this.$t('home.consumptionAmountpriority'),  //消费金额优先
						value: 1,
					},
					{
						label: this.$t('home.priorityForConsumption'), //消费次数优先
						value: 2,
					},
					{
						label: this.$t('home.recentConsumptionFirst'), //最近消费优先
						value: 3,
					}
				],
				downOption: {
					textInOffset: this.$t('publicLang.pullDownToRefresh'), // 下拉的距离在offset范围内的提示文本
					textOutOffset: this.$t('publicLang.releaseUpdate'), // 下拉的距离大于offset范围的提示文本
					textLoading: this.$t('publicLang.loading'), // 加载中的提示文本
					textSuccess: this.$t('publicLang.loadedSuccessfully'), // 加载成功的文本
					textErr: this.$t('publicLang.failedToLoad'), // 加载失败的文本
				},
				upOption: {
					textLoading: this.$t('publicLang.loading'), // 加载中的提示文本
					auto: false, // 不自动加载
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 20, // 每页数据的数量
					},
					empty: {
						tip: this.$t('publicLang.empty') // 提示
						// btnText: "去看看",
					},
				},
				userList: [],
				userFrom: {
					labelId: '',
					userType: '',
					sex: '',
					isPromoter: '',
					country: '',
					payCount: '',
					accessType: 0,
					dateLimit: '',
					keywords: '',
					province: '',
					city: '',
					page: 1,
					limit: 20,
					level: '',
					groupId: '',
					consumptionType: ''
				},
				dropdownName: this.$t('home.sortBy')
			}
		},
		onLoad(options) {

		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('navigation.customerManagement')  //客户管理
			})
		},
		mounted() {
			var _this = this
			const query = uni.createSelectorQuery().in(this);
			query.selectAll('.clientRect').boundingClientRect(data => {
				let height = 0
				data.map(i => {
					height = height + i.height
				})
			 _this.topHeight = height * 2
			}).exec();
		},
		methods: {
			upCallback(page) {
				var _this = this
				this.userFrom.page = page.num
				userListApi(this.userFrom).then(res => {
					console.info(res.data, 123)
					var data = res.data.list
					if (page.num == 1) _this.userList = [];
					_this.userList = _this.userList.concat(data);
					_this.mescroll.endBySize(data.length, res.data.total)
				}).catch((e) => {
					_this.mescroll.endErr()
					uni.showToast({
						title: e,
						icon: "none"
					})
					console.info(e)
				});
			},
			dropdownChange(value) {
				console.info(value)
				if (value==this.userFrom.consumptionType){
					this.value1=''
					this.userFrom.consumptionType=''
					this.dropdownName = "筛选条件"
					this.mescroll.resetUpScroll(true)
					this.$refs.uDropdown.highlight()
					return
				}
				var obj = this.options.filter((x) => {
					return x.value == value
				})
				this.dropdownName = obj[0].label
				this.userFrom.consumptionType = value
				this.mescroll.resetUpScroll(true)
				this.$refs.uDropdown.highlight(0);
			},
			clearInput() {
				this.userFrom.keywords = ''
				this.mescroll.resetUpScroll(false)
			},
			cancelFocus(e) {
				if (e.type === "focus") return
				this.userFrom.keywords = e.search
				this.mescroll.resetUpScroll(false)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.custome-list {
		background-color: #FFFFFF;
		margin-top: 20rpx;
	}

	.custome-item {
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
		color: #7E7B7B;
		font-size: 26rpx;
	}

	.item-right {
		margin-left: 24rpx;

		view {
			margin-top: 6rpx;
		}
	}

	.name {
		color: #111111;
		font-size: 32rpx;
		font-weight: bold;
	}

	.consume-count {
		display: flex;
	}

	.line {
		height: 24rpx;
		width: 1rpx;
		background-color: #CCCCCC;
		margin: 0 20rpx;
	}
</style>
